<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                option: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.option = null;
            clearInterval(this.timer);
        },
        methods: {
            toFix(val){
                return (val/10000).toFixed(2);
            },
            initChart(e) {
                if (e.cData.length !== 0) {
                    this.chart = echarts.init(document.getElementById(this.id));
                    this.option = {
                        backgroundColor: '#ffffff',
                        title: {
                            top: 20,
                            text: e.title,
                            textStyle: {
                                fontWeight: '600',
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} :{c}<br/>占比:{d}%'
                        },
                        legend: {
                            left: 'center',
                            bottom: '0',
                            data: e.cLabel
                        },
                        series: [{
                            name: e.sName,
                            type: 'pie',
                            /* label: {
                                position: 'outter',
                                show: true,
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }, */
                            roseType: e.roseType ? 'radius' : '',
                            radius: e.seriesRadius || [15, 95],
                            center: ['50%', '48%'],
                            data: e.cData,
                            animationEasing: 'cubicInOut',
                            animationDuration: 2000
                        }]
                    };
                    let _this = this;
                    _this.chart.setOption(this.option,true);
                    window.addEventListener("resize",()=>{
                        _this.chart.resize();
                    });
                    // _this.timer = setInterval(function() {
                    //     _this.chart.setOption({}, true);
                    //     _this.chart.setOption(_this.option, true);
                    // }, 10000);
                } else {
                    // 以下是暂无数据显示样式(样式根据本身需求进行调整)
                    var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">${e.title}</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
                    document.getElementById(this.id).innerHTML = html
                    document.getElementById(this.id).removeAttribute('_echarts_instance_')
                }
                

            }
        }
    }
</script>
